<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>吸顶灯实现</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .tabs {
            display: flex;
            background-color: #ffff00;
            padding: 5px 0;
            overflow-x: auto;
            white-space: nowrap;
        }
        .tab {
            flex: 0 0 auto; 
            padding: 10px 15px; 
            cursor: pointer;
            margin-right: 5px; 
        }
        .tab.active {
            background-color: #f90;
            color: #fff;
        }
        .main_content {
            height: 8000px;
            background-color: #eee;
        }
        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #333;
            height: 50px;
            line-height: 50px;
            text-align: left; 
            color: #fff;
            z-index: 1000;
        }
        .content {
            margin-top: 60px; 
            padding: 20px;
            background-color: #f90;
            height: 2000px;
            text-align: center;
            line-height: 200px;
            display: none;
        }
        .content.active {
            display: block;
        }
    </style>
    <script src="../js/jquery-1.11.1.js"></script>
    <script>
        $(function(){
            var so = $(".sticky").offset().top;
            $(window).scroll(function(){
                var st = $(window).scrollTop();
                if(st > so){
                    $(".sticky").addClass("ac");
                } else {
                    $(".sticky").removeClass("ac");
                }
            });
            $(".tab").click(function(){
                var index = $(this).index();
                $(".tab").removeClass("active");
                $(this).addClass("active");
                $(".content").removeClass("active");
                $(".content").eq(index).addClass("active");
            });
        });
    </script>
</head>
<body>
    <div class="sticky">
        <div class="tabs">
            <div class="tab active">tab01</div>
            <div class="tab">tab02</div>
            <div class="tab">tab03</div>
        </div>
    </div>
    <div class="main_content">
        <div class="content active">tab文字内容一</div>
        <div class="content">tab文字内容二</div>
        <div class="content">tab文字内容三</div>
    </div>
</body>
</html>